<template>
  <div>
    <div class="grzy">
      <!-- 上 -->
      <div class="grzy_s" v-for="i in userxx" :key="i.uid" id="cccc">
        <div class="grzy_left">
          <div class="grzy_st">
            <span>人物信息</span>
          </div>
          <div class="grzy_sm">
            <div>
              <img :src="xztx" alt="" @click="shezhixs=true">
              <el-button type="primary" v-show="shezhixs" @click="shezhitx=true;shezhixs=false" class="shezhibtn" @blur="shezhixs=false">修改头像</el-button>
              <div>
                <span>{{i.uname}}</span>
                <!-- <input type="text" :value="i.uname"> -->
                <el-input
                  type="textarea"
                  :rows="3"
                  placeholder="请输入内容"
                  v-model="userxx[0].signature"
                  @blur="xiugai()"
                  id="xiux"
                  >
                </el-input>
              </div>
              <div>
                <span><i class="el-icon-star-on"></i>{{i.ulike}}</span>
                <span><i class="el-icon-view"></i>{{i.collection}}</span>
                <span><i class="el-icon-s-custom"></i>{{i.fans}}</span>
              </div>
            </div>
            <!-- 设置头像弹出框 -->
            <div v-show="shezhitx" class="shezhitxk">
              <div>
                <span>个性化头像</span>
                <div>
                  <img src="/img/0000.jpg" alt="" @click="ddtx('/img/0000.jpg',1);activetx1=1" :class="activetx1==1?'active':''">
                  <img src="/img/0004.jpg" alt="" @click="ddtx('/img/0004.jpg',2);activetx1=2" :class="activetx1==2?'active':''">
                  <img src="/img/0005.jpg" alt="" @click="ddtx('/img/0005.jpg',3);activetx1=3" :class="activetx1==3?'active':''">
                  <img src="/img/0002.jpg" alt="" @click="ddtx('/img/0002.jpg',4);activetx1=4" :class="activetx1==4?'active':''">
                  <img src="/img/0006.jpg" alt="" @click="ddtx('/img/0006.jpg',5);activetx1=5" :class="activetx1==5?'active':''">
                  <img src="/img/0007.jpg" alt="" @click="ddtx('/img/0007.jpg',6);activetx1=6" :class="activetx1==6?'active':''">
                  <img src="/img/0008.jpg" alt="" @click="ddtx('/img/0008.jpg',7);activetx1=7" :class="activetx1==7?'active':''">
                  <img src="/img/0009.jpg" alt="" @click="ddtx('/img/0009.jpg',8);activetx1=8" :class="activetx1==8?'active':''">
                  <img src="/img/0003.jpg" alt="" @click="ddtx('/img/0003.jpg',9);activetx1=9" :class="activetx1==9?'active':''">
                  <span>...</span>
                </div>
              </div>
              <div>
                <span>自定义头像</span>
                <div>
                  <el-upload
                    class="upload-demo"
                    drag
                    action="http://localhost:3000/upload"
                    name="uploadFile"
                    multiple
                    :on-success="handleUploadSuccess"
                    >
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">点击上传头像</div>
                  </el-upload>
                </div>
              </div>
              <div class="zhdan">
                <div @click="xztx='';shezhitx=false;xztx=i.headp">取消</div>
                <div @click="shezhitxqd();shezhitx=false">确定</div>
              </div>
            </div>
          </div>
        </div>
        <div></div>
        <div class="grzy_sr">
          <span>设置</span>
          <div>
            <template>
              <el-tabs v-model="activeName3" @tab-click="handleClick">
                <el-tab-pane label="主题设置" name="zt">
                  <div class="ztsz">
                    <div :class="activeys1==1?'active2':''"><span style="background-color:#BBFFFF;" @click="docolor('#BBFFFF');activeys1=1"></span>青白</div>
                    <div :class="activeys1==2?'active2':''"><span style="background-color:#FF9797;" @click="docolor('#FF9797');activeys1=2"></span>淡红</div>
                    <div :class="activeys1==3?'active2':''"><span style="background-color:#79FF79;" @click="docolor('#79FF79');activeys1=3"></span>翠柳</div>
                    <div :class="activeys1==4?'active2':''"><span style="background-color:#d3a4ff;" @click="docolor('#d3a4ff');activeys1=4"></span>云紫</div>
                    <div :class="activeys1==5?'active2':''"><span style="background-color:#97CBFF;" @click="docolor('#97CBFF');activeys1=5"></span>溪蓝</div>
                    <div :class="activeys1==6?'active2':''"><span style="background-color:#FFF0AC;" @click="docolor('#FFF0AC');activeys1=6"></span>辉煌</div>
                    <div :class="activeys1==7?'active2':''"><span style="background-color:#C0C0C0;" @click="docolor('#C0C0C0');activeys1=7"></span>灰银</div>
                  </div>
                </el-tab-pane>
                <el-tab-pane label="更多设置" name="qt">
                  <div class="ztsz">
                    <div class="xzk">
                      <div>是否开放个人页面</div>
                      <el-switch
                        v-model="valuekj"
                        active-color="#13ce66"
                        inactive-color="#ff4949"
                        >
                      </el-switch>
                    </div>
                    <div class="xzk2">
                      <el-button type="text" @click="dialogVisiblemm = true">修改密码</el-button>
                      <el-button type="text" @click="dialogVisiblesj = true">修改手机</el-button>
                      <el-button type="text" @click="dialogVisiblezh = true">注销账号</el-button>
                      <!-- <span>修改手机</span>
                      <span>注销账号</span> -->
                    </div>
                  </div>
                </el-tab-pane>
                <!-- 修改密码 -->
                <el-dialog
                  title="请输入密码验证身份"
                  :visible.sync="dialogVisiblemm"
                  width="30%"
                  center>
                  <el-input v-model="inputj" placeholder="请输入旧的密码" show-password></el-input>
                  <el-input v-model="inputx" placeholder="请输入新的密码" show-password></el-input>
                  <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisiblemm = false">取 消</el-button>
                    <el-button type="primary" @click="dialogVisiblemm = false;xgmm()">确 定</el-button>
                  </span>
                </el-dialog>
                <!-- 修改手机号码 -->
                <el-dialog
                  title="请输入密码验证身份"
                  :visible.sync="dialogVisiblesj"
                  width="30%"
                  center>
                  <el-input v-model="inputj" placeholder="请输入旧的密码" show-password></el-input>
                  <el-input v-model="inputsj" placeholder="请输入新的手机号码"></el-input>
                  <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisiblesj = false">取 消</el-button>
                    <el-button type="primary" @click="dialogVisiblesj = false;zhuxiaoqd()">确 定</el-button>
                  </span>
                </el-dialog>
                <!-- 注销账号 -->
                <el-dialog
                  title="注销账号将会永久删除此账号的所有信息，并且不可找回，请问您是确定要注销账号吗？"
                  :visible.sync="dialogVisiblezh"
                  width="30%"
                  class="zhuxiaozh">
                  <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisiblezh = false">取 消</el-button>
                    <el-button type="primary" @click="dialogVisiblezh = false;dialogVisibleqd = true">确 定</el-button>
                  </span>
                </el-dialog>
                <!-- 确定注销账号 -->
                <el-dialog
                  title="请输入密码验证身份"
                  :visible.sync="dialogVisibleqd"
                  width="30%"
                  center>
                  <el-input v-model="inputj" placeholder="请输入密码" show-password></el-input>
                  <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisibleqd = false">取 消</el-button>
                    <el-button type="primary" @click="dialogVisibleqd = false;xgsj()">确 定</el-button>
                  </span>
                </el-dialog>
              </el-tabs>
            </template>
            <div class="yssz">
              <div class="yhdxy">
                <!-- <div>隐私设置</div> -->
                <div><router-link to="/gonggao1">用户协议</router-link></div>
                <div><router-link to="/gonggao2">隐私协议</router-link></div>
              </div>
              <div>
                <span @click="tczh()">退出登录</span>
                <span @click="setls(loginshow=true)">切换账号</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 中 -->
      <div class="grzy_z" id="cccc1">
        <router-link  to="/" class="qmqt" v-if="mysp.length>6">更多></router-link>
        <template>
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="个人食谱" name="first">
              <div class="grsp">
                <div v-for="i in mysp" :key="i.rid">
                  <img :src="i.r_pic" alt="" class="sctp">
                  <div>
                    <span>{{i.rname}}</span>
                    <div class="sprq">
                      <span><i class="el-icon-star-on"></i>{{i.score}}</span>
                      <span><i class="el-icon-view"></i>{{i.rq}}</span>
                    </div>
                    <span>删除食谱</span>
                  </div>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="图表统计" name="second">
              <div id="main1"></div>
              <div id="main"></div>
            </el-tab-pane>
          </el-tabs>
        </template>
      </div>
      <!-- 下 -->
      <div class="grzy_z" id="cccc2">
        <router-link  to="/" class="qmqt" v-if="arruser.length>6">更多></router-link>
        <template>
          <el-tabs v-model="activeName1" @tab-click="handleClick">
            <el-tab-pane label="我的关注" name="isfans">
              <div class="grsp">
                <div v-for="(i,index) in arruser" :key="i.uid">
                  <img :src="i.headp" alt="" class="gztp">
                  <div>
                    <span>{{i.uname}}</span>
                    <!-- <span>{{i.signature}}</span> -->
                    <span>
                      <i class="el-icon-view"></i>
                      {{i.zl}}
                    </span>
                    <span @click="quxgz(i.uname,index);">不再关注</span>
                  </div>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="我的粉丝" name="fans">
              <div class="grsp">
                <div v-for="i in myfser" :key="i.uid">
                  <img :src="i.headp" alt="" class="gztp">
                  <div>
                    <span>{{i.uname}}</span>
                    <!-- <span>{{i.signature}}</span> -->
                    <span>
                      <i class="el-icon-view"></i>
                      {{i.zl}}
                    </span>
                    <span>关注Ta</span>
                  </div>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </template>
      </div>
      <div class="grzy_z" id="cccc3">
        <router-link  to="/" class="qmqt" v-if="myscsp.length>6">更多></router-link>
        <template>
          <el-tabs v-model="activeName2" @tab-click="handleClick">
            <el-tab-pane label="我的收藏" name="shouc">
              <div class="grsp">
                <div v-for="i in myscsp" :key="i.rid">
                  <img :src="i.r_pic" alt="" class="sctp">
                  <div>
                    <span>{{i.rname}}</span>
                    <div class="sprq">
                      <span><i class="el-icon-star-on"></i>{{i.score}}</span>
                      <span><i class="el-icon-user-solid"></i>{{i.r_uname}}</span>
                    </div>
                    <span>取消收藏</span>
                  </div>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import { mapState,mapMutations } from 'vuex'
  export default {
    computed:{
      ...mapState(["loginshow"],["loginname"],["backcolor"],["loginname1"])
    },
    data() {
      return {
        activeName: 'first',
        activeName1: 'isfans',
        activeName2: 'shouc',
        arruser:[],
        myfser:[],
        mysp:[],
        myscsp:[],
        userxx:{},
        cpname:[],
        cprq:[],
        dialogVisiblemm: false,
        dialogVisiblesj: false,
        dialogVisiblezh: false,
        dialogVisibleqd: false,
        activeName3: 'zt',
        value: true,
        valuekj:true,
        ztys:'#fff',
        inputj: '',
        inputx: '',
        inputsj:'',
        shezhixs:false,
        shezhitx:false,
        xztx:'',
        activetx1:null,
        activeys1:null
      }
    },
    methods: {
      // ...mapMutations(["updateLoginState1"]),
      ...mapMutations(["setls"]),
      handleClick(tab, event) {
        console.log(tab, event);
      },
      // 修改头像
      ddtx(tx,i){
        this.xztx=tx
        this.activetx1=i
      },
      shezhitxqd(){
        // console.log('头像',this.xztx)
        const url="/xgtxlist"
        const params=`uname=${this.$store.state.loginname}&headp=${this.xztx}`
        // console.log(params)
        this.axios.post(url,params).then((res)=>{
          console.log(res)
          if(res.data.code==200){
            alert('修改成功')
            this.$store.commit('updateLoginState1',this.xztx)
          }else{
            alert('修改失败')
          }
        })
      },
      handleUploadSuccess(res){
        console.log(res)
        this.xztx=res.urls[0]
        console.log(this.xztx)
      },
      // 修改密码
      xgmm(){
        const url="/xgmmlist"
        const params=`uname=${this.$store.state.loginname}&jdmm=${this.inputj}&xdmm=${this.inputx}`
        console.log(params)
        this.axios.post(url,params).then((res)=>{
          console.log(res)
          if(res.data.code==200){
            alert('修改成功')
          }else{
            alert('身份验证不通过')
          }
        })
      },
      // 修改手机号码
      xgsj(){
        const url="/xgsjlist"
        const params=`uname=${this.$store.state.loginname}&jdmm=${this.inputj}&phone=${this.inputsj}`
        console.log(params)
        this.axios.post(url,params).then((res)=>{
          console.log(res)
          if(res.data.code==200){
            alert('修改成功')
          }else{
            alert('身份验证不通过')
          }
        })
      },
      // 确定注销账号
      zhuxiaoqd(){
        const url="/delyh"
        const params=`uname=${this.$store.state.loginname}&jdmm=${this.inputj}`
        console.log(params)
        this.axios.post(url,params).then((res)=>{
          console.log(res)
          if(res.data.code==200){
            alert('修改成功')
          }else{
            alert('身份验证不通过')
          }
        })
      },
      // 修改背景颜色
      docolor(c){
        // console.log(c)
        this.ztys=c
        // this.$store.commit('updateys',c)
        // console.log(this.backcolor)
        // console.log(this.ztys)
        const ys=document.getElementById('cccc')
        ys.style.backgroundColor=this.ztys
        const ys1=document.getElementById('cccc1')
        ys1.style.backgroundColor=this.ztys
        const ys2=document.getElementById('cccc2')
        ys2.style.backgroundColor=this.ztys
        const ys3=document.getElementById('cccc3')
        ys3.style.backgroundColor=this.ztys

      },
      // handleClose(done) {
      //   this.$confirm('确认关闭？')
      //     .then(_ => {
      //       done();
      //     })
      //     .catch(_ => {});
      // },
      handleClick(tab, event) {
        console.log(tab, event);
      },
      //退出账号
      tczh(){
        // this.settx(null)
        this.$store.commit('updateLoginEnd',null)
        this.$store.commit('updateLoginEnd1',null)
        this.$router.push('/')
      },
      //修改签名
      xiugai(){
        let a=document.getElementById('xiux')
        console.log(a.value)
        const url="/xglist"
        const params=`uname=${this.$store.state.loginname}&signature=${a.value}`
        this.axios.post(url,params).then((res)=>{
          console.log(res)
        })
      },
      // 关注
      getgz(){
        const url="/fanslist"
        const url1="/fansuserlist"
        const params=`uname=${this.$store.state.loginname}`
        this.axios.post(url,params).then((res)=>{
          // console.log(res)
          if(res.data.code==1){
            res.data.data.forEach(fs => {
              // console.log(fs)
              const params1=`uname=${fs.focus_uname}`
              this.axios.post(url1,params1).then((res)=>{
                // console.log(res)
                this.arruser.push(res.data.data[0])
                // console.log(this.arruser)
              })
            });
          }
        })
      },
      //取消关注
      quxgz(fname,xh){
        const url="/delfs"
        const params=`uname=${this.$store.state.loginname}&focus_uname=${fname}`
        this.axios.post(url,params).then((res)=>{
          console.log(res)
          // this.$route.innerHTML='关注'
          // console.log(this.arruser[xh])
          // if(res.code==1){
          //   // console.log(this.$refs)
          //   // console.log(this.arruser[index])
          // }
        })
      },
      // 粉丝
      getfs(){
        const url="/isfanslist"
        const url1="/fansuserlist"
        const params=`focus_uname=${this.$store.state.loginname}`
        this.axios.post(url,params).then((res)=>{
          // console.log(res)
          if(res.data.code==1){
            res.data.data.forEach(fs => {
              // console.log(fs)
              const params1=`uname=${fs.uname}`
              this.axios.post(url1,params1).then((res)=>{
                // console.log(res)
                this.myfser.push(res.data.data[0])
                // console.log(this.myfser)
              })
            });
          }
        })
      },
      // 用户食谱
      getusersp(){
        const url="/usersplist"
        const params=`r_uname=${this.$store.state.loginname}`
        this.axios.post(url,params).then((res)=>{
          // console.log(res)
          this.mysp=res.data.data
          // console.log(this.mysp)
          res.data.data.forEach((item)=>{
          this.cpname.push(item.rname)
          this.cprq.push(item.rq)
        })
        // 绘制菜谱图表
        let chart = echarts.init(document.getElementById("main"),"dark");
        let option = {
          title: {
            text: "个人食谱欢迎度表",
            left: "center",
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            right: "10px",
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data:this.cpname,
              axisTick:{
                interval:0,
              },
              axisTick: {
                alignWithLabel: true
              }
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              name: '欢迎度',
              type: 'bar',
              barWidth: '60%',
              data:this.cprq
            }
          ]
        };
        chart.setOption(option);
        let chart1 = echarts.init(document.getElementById("main1"),"dark");
        let option1 = {
          title: [
            {
              text: '热\n度\n分\n布',
              top:10,
              left:5
            }
          ],
          polar: {
            radius: [20, '80%']
          },
          angleAxis: {
            max: 25,
            startAngle: 45
          },
          radiusAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['收藏', '点赞', '阅读']
          },
          tooltip: {},
          series: {
            type: 'bar',
            data: [5, 10, 20],
            coordinateSystem: 'polar',
            // label: {
            //   show: true,
            //   position: 'middle',
            //   formatter: '{b}: {c}'
            // }
          }
        };
        chart1.setOption(option1);
        })
      },
      // 用户个人信息
      getuserxx(){
        const url="/ulist"
        const params=`uname=${this.$store.state.loginname}`
        this.axios.post(url,params).then((res)=>{
          this.userxx=res.data.data
          console.log(this.userxx)
          this.xztx=this.userxx[0].headp 
          this.valuekj=this.userxx[0].is_show=='true'?true:false
          // console.log(this.valuekj)
        })
      },
      //收藏食谱
      getscsp(){
        const url="/mysclist"
        const url1="/ridlist"
        const params=`uname=${this.$store.state.loginname}`
        this.axios.post(url,params).then((res)=>{
          // console.log(res)
          if(res.data.code==1){
            res.data.data.forEach(fs => {
              // console.log(fs)
              const params1=`rid=${fs.collection_rid}`
              this.axios.post(url1,params1).then((res)=>{
                // console.log(res)
                this.myscsp.push(res.data.data[0])
                // console.log(this.myscsp)
              })
            });
          }
        })
      },
    },
    mounted(){
      this.getgz()
      this.getusersp()
      this.getfs()
      this.getscsp()
      this.getuserxx()
    },
    watch: {
      valuekj(newValue, oldValue) {
        const url="/xgkjlist"
        const params=`uname=${this.$store.state.loginname}&is_show=${this.valuekj}`
        this.axios.post(url,params).then((res)=>{
          console.log(res)
          if(res.data.code===200){
            alert('您已成功开放空间，其他饭友将可以进入您的空间浏览！')
          }else if(res.data.code===201){
            alert('您已成功关闭空间，其他饭友将无法进入您的空间！')
          }
          else{
            alert('设置失败')
          }
        })
      }
    },
  }
</script>

<style lang="scss">
#main{
  width: 700px;
  height: 215px;
  display: inline-block;
}
#main1{
  width: 380px;
  height: 215px;
  display: inline-block;
}
  .grzy{
    width: 1200px;
    margin: 0 auto;
    .grzy_s{
      width: 1058px;
      margin: 25px auto;
      padding: 10px;
      display: flex;
      justify-content: space-between;
      background-color: rgb(207, 207, 204);
      .el-textarea__inner{
        resize: none;
      }
      >div{
        width: 45%;
        // background-color: rgb(245, 90, 90);
      }
      >div:nth-child(2){
        width: 0;
        border: 3px solid rgb(255, 255, 255);
        border-radius: 5px;
      }
      .grzy_st{
        display: flex;
        justify-content: space-between;
        >span{
          font-weight: 800;
          font-size: 20px;
          line-height: 35px;
        }
      }
      .grzy_sm{
        >div{
          display: flex;
          justify-content: space-between;
          position: relative;
          >img{
            width: 100px;
            height: 100px;
            margin-right: 15px;
            margin-left: 15px;
          }
          .shezhibtn{
            position: absolute;
            width: 100px;
            line-height: 30px;
            text-align: center;
            padding: 0;
            top: 68px;
            left: 15px;
            border-radius: 0;
            span{
              font-size: 15px;
            }
          }
          >div:nth-child(3){
            width: 350px;
            >span{
              line-height: 20px;
              display: block;
              margin-bottom: 5px;
            }
          }
          >div:last-child{
            width: 100px;
            margin: 10px auto;
            text-align: left;
            display: flex;
            flex-direction: column;
            >span{
              display: inline-block;
              line-height: 30px;
              text-align: right;
            }
          }
        }
        .shezhitxk{
          position: fixed;
          width: 400px;
          height: 200px;
          z-index: 10000;
          top: calc(50% - 200px);
          left: calc(50% - 200px);
          // box-shadow: 3px 3px 5px 5px #333;
          // background-color: rgb(141, 213, 255);
          background-image: linear-gradient(rgb(211, 252, 252),rgb(165, 244, 247),rgb(197, 248, 248));
          display: flex;
          flex-wrap: wrap;
          >div:first-child{
            width: 283px;
            >span{
              display: inline-block;
              padding: 10px;
            }
            div{
              border: 3px inset rgb(117, 117, 117);
              display: flex;
              align-items: center;
              flex-wrap: wrap;
              img{
                width: 45px;
                height: 45px;
                border-radius: 50%;
                margin: 5px;
                &.active{
                  width: 41px;
                  height: 41px;
                  border: 2px solid yellow;
                }
              }
              span{
                display: inline-block;
                width: 45px;
                line-height: 45px;
                border-radius: 50%;
                margin: 5px;
                text-align: center;
                font-size: 30px;
              }
            }
          }
          >div:nth-child(2){
            padding: 0;
            margin: 0;
            width: 117px;
            >span{
              display: inline-block;
              padding: 10px;
              line-height: 21px;
              text-align: left;
            }
            >div{
              border: 3px inset rgb(117, 117, 117);
              height: 110px;
              .el-upload-dragger{
                width: 111px;
                height: 108px;
                margin: 0;
                padding: 0;
              }
              .el-icon-upload:before {
                position: relative;
                top: -25px;
              }
              .el-upload__text{
                position: relative;
                top: -35px;
              }
            }
            
          }
          .zhdan{
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            width: 100%;
            div{
              text-align: center;
              width: 80px;
              margin: 0 10px;
              line-height: 25px;
              background-color: red;
              color: #fff;
              border-radius: 5px;
            }
          }
        }
      }

      .grzy_sr{
        .el-tabs--top{
          width: 350px;
        }
        .el-tabs__active-bar{
          width: 0;
          height: 0;
        }
        // 表头下方的线条
        div.el-tabs__nav-wrap::after{
          content: '';
          height: 0;
          width: 0;
        }
        .el-tabs__item{
          font-size: 16px;
          font-weight: 500;
          // margin-top: 20px;
          color: rgb(151, 151, 151);
          padding: 0;
          margin: 0;
          line-height: 20px;
          margin-bottom: 5px !important;
          &:hover{
            color: rgb(255, 0, 0);
          }
        }
        // 表头颜色
        .el-tabs__item.is-active{
          color: rgb(255, 0, 0);
          // background-color: red;
        }
        .el-tabs__item{
          margin-right: 10px;
        }
        //上方高度
        .el-tabs__nav-scroll {
          height: 18px;
        }
        >span{
          line-height: 40px;
          font-size: 20px;
          font-weight: 800;
        }
        >div{
          display: flex;
          .ztsz{
            display: flex;
            flex-wrap: wrap;
            width: 304px;
            position: relative;
            background-color: #fff;
            // border: 1px solid #000;
            >div{
              margin: 5px;
              font-size: 14px;
              text-align: center;
              span{
                display: block;
                width: 33px;
                height: 40px;
                background-color: red;
              }
              &.active2{
                color: #f00;
                >span{
                  width: 31px;
                  height: 38px;
                  border: 1px solid #000;
                }
              }
            }
            .xzk{
              font-size: 16px;
              width: 90%;
              margin: 0;
              display: flex;
              margin-top: 5px;
              margin-left: 10px;
              justify-content: space-between;
              span{
                height: 20px;
                // margin-left: 15px;
              }
              // margin-bottom: 5px;
              
            }
            .xzk2{
              display: flex;
              justify-content: right;
              padding: 0;
              margin: 0;
              // border-top: 1px solid #000;
              // margin-top: 10px;
              margin: 8px auto;
              span{
                margin-right: 8px;
                width: 80px;
                height: 25px;
                display: inline-block;
                line-height: 25px;
                border-radius: 3px;
                font-size: 15px;
                color: #fff;
              }
            }
          }
          .yssz{
            width: 30%;
            >div{
              display: flex;
              flex-wrap: wrap;
              margin-top: 5px;
              // >div:first-child{
              //   width: 100%;
              // }
              >div{
                margin-right: 5px;
              }
              >span{
                margin-right: 5px;
                background-color: red;
                text-align: center;
                border-radius: 5px;
                color: #FFF;
                font-size: 14px;
                margin-top: 5px;
                width: 130px;
                line-height: 25px;
              }
            }
            .yhdxy{
              display: flex;
              justify-content: left;
              margin: 0;
              // padding-left: 2px;
              margin-top: 10px;
              div{
                border: 1px solid #000;
                padding: 2px;
                border-radius: 14px;
                width: 40%;
                text-align: center;
                a{
                  font-size: 10px;
                  color: #000;
                }
              }
            }
          }
        }
        // 弹出框设置
        .el-dialog{
          .el-icon-close:before{
            content: '';
          }
          .el-dialog__header{
            padding: 0;
            padding-top: 10px;
          }
          .el-dialog--center .el-dialog__body{
            padding: 0;
            padding-top: 5px;
            text-align: center;
          }
          .el-dialog__footer{
            padding: 0;
            padding-bottom: 10px;
            padding-top: 10px;
          }
          .el-button{
            padding: 5px 15px;
          }
          .el-input__inner{
            width: 100%;
            margin: 5px;
          }
        }
        .zhuxiaozh{
          .el-dialog__body{
            padding: 0;
          }
          .el-dialog__footer{
            text-align: center;
            padding-top: 0;
          }
          .el-dialog__header{
            padding: 15px;
            text-indent: 2em;
          }
          .el-dialog__title{
            font-size: 16px;
            font-weight: 600;
          }
        }
      }
    }
    .el-button--text:focus, .el-button--text:hover{
      padding: 0;
    }
    .el-button--text:focus, .el-button--text{
      padding: 0;
    }
    .grzy_z{
      width: 90%;
      margin: 0 auto;
      margin-top: 20px;
      box-sizing: border-box;
      background-color: rgb(207, 207, 204);
      position: relative;
      .el-tabs__active-bar{
        width: 0;
        height: 0;
      }
      // 表头下方的线条
      // div.el-tabs__nav-wrap::after{
      //   content: '';
      //   height: 0;
      //   width: 0;
      // }
      .el-tabs__item{
        font-size: 20px;
        font-weight: 600;
        margin-top: 20px;
        color: rgb(79, 76, 76);
        padding: 0;
        &:hover{
          color: #000;
        }
      }
      .grzy .grzy_z .el-tabs__item.is-active{
        margin: 10px;
      }
      // 表头颜色
      .el-tabs__item.is-active{
        color: rgb(0, 0, 0);
      }
      .el-tabs__item{
        margin:5px 10px;
      }
      // 表头移动位置
      // .el-tabs__nav-scroll{
      //   width: 250px;
      //   margin: 0 auto;
      // }
      // 下方表单内容居中
      .el-tabs__content{
        min-height: 200px;
      }
      .grsp{
        display: flex;
        margin-bottom: 15px;
        >div{
          width: 134px;
          height: 200px;
          margin: 0 10px;
          text-align: center;
          border-radius: 25px;
          background-color: rgb(216, 216, 169);
          >img{
            width: 100%;
            border-top-left-radius: 25px;
            border-top-right-radius: 25px;
          }
          .sctp{
            height: 100px;
          }
          .gztp{
            width: 60%;
            border-radius: 50%;
            margin-top: 15px;
          }
          >div{
            display: flex;
            flex-direction: column;
            margin: 10px 0;
            >span{
              text-align: center;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              margin-bottom: 5px;
            }
            .sprq{
              display: flex;
              text-align: center;
              >span{
                width: 50%;
              }
            }
            >span:last-child{
              display: inline-block;
              margin: 0 auto;
              width: 70%;
              line-height: 25px;
              border-radius: 5px;
              margin-top: 5px;
              background-color: red;
              color: #fff;
            }
          }
        }
      }
      .qmqt{
        position: absolute;
        right: 10px;
        top: 12px;
        color: #000;
      }
    }
  }
  #TB_tj{
    width: 80%;
    height: 215px;
  }

  
</style>